define(function(require) {
  // load third-party javascript libraries
  var $ = require('jquery'),
      _ = require('underscore'),
      Backbone = require('backbone'),
  	  Selectize = require('selectize');

  // load project dependencies
  var SampleSetCollection = require('collections/sample_sets');

  // define view
  var SelectSampleSetsView = Backbone.View.extend({

  	initialize: function(options) {
      var self = this;
      // need to store the parent SelectStudyView
      self.parentView = options.parentView;
      self.selectedItems = options.selectedItems;
      // events
      self.listenTo(self.parentView, 'change', self.onChangeStudy);
      // store sample sets loaded by this view
      self.collection = new SampleSetCollection;
  	  // initialize the view as an empty selectize.js control
      self.render();
      var selectize = self.$el[0].selectize;
      selectize.disable();
  	},

  	render: function() {
      var self = this;
      // initialize the selectize control
      var $el = self.$el.selectize({
        valueField: '_id',
        searchField: ['name', 'desc'],
        maxItems: null,
        maxOptions: null,
        preload: false,
        render: {
          item: function(data, escape) {
            return '<div>' +
                '<span><strong>' + escape(data.name) + '</strong></span>' +
                '<br><span>' + escape(data.desc) + '</span>' +
                '</div>';
          },
          option: function(data, escape) {
              return '<div>' +
                  '<span><strong>' + escape(data.name) + '</strong></span>' +
                  '<br><span>' + escape(data.desc) + '</span>' +
                  '</div>';
          }   
        },
        onItemAdd: function(value, $item) {
          console.log('item add ' + value);
          // get data associated with option
          itemData = this.options[value];
          self.selectedItems.add(itemData);
        },
        onItemRemove: function(value) {
          console.log('item remove ' + value);
          // get data associated with option
          model = self.selectedItems.get(value);
          self.selectedItems.remove(model);
        },
        onClear: function() {
          self.selectedItems.clear();
        }
      });
      // return if collection is empty
      if ( !self.collection.length ) {
        return self;
      }
      // add options
      var selectize = $el[0].selectize;
      self.collection.each(function(model) {
        selectize.addOption({ 
          '_id': model.get('_id'),
          'name': model.get('name'),
          'desc': model.get('desc')
        });
      });
      // enable selectize control
      selectize.refreshOptions();
      selectize.enable();
      return self;
    },

    onChangeStudy: function(study) {
      var self = this;
      // destroy the selectize instance
      var selectize = self.$el[0].selectize;
      selectize.clearOptions();
      selectize.destroy();
      // load sample sets for the new study and
      // render when sample sets finish loading
      self.collection.reset();
      self.listenToOnce(self.collection, 'sync', self.render);
      self.collection.load(study.get('_id'));
    }

  });

  return SelectSampleSetsView;
});